<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <title>TodoWork!</title>
</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="mainpage.html">题单</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="mainpage.html">题单<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Submit.html">提交题目</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Submit.html">英语四级听力练习(计划开发)</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="AboutMe.html">我的发布</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Score.html">我的成绩</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="user_info" >
    <i class="bi bi-emoji-laughing" style="font-size: 8rem;float: left"></i>
    <h1 style="margin: 50px;float: left" class="user"></h1>
    </div>

</div>
<table class="table">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">题目</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody  class="tbody">

    </tbody>
</table>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>
    var account = $.cookie('account');
    var dataList;
    var user = $.cookie('user')
    initial();
    function initial() {
        $(".user").html(user)
        var target = account;
        if(user === "administrator"){
            target = "all";
        }

        $.ajax({
            type: 'post',
            url: '/GetIndividualList',
            data: {
                'email':target
            },
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                dataList = data;
                DrawnList()
            },
            error: function(data) {
                sendMessage("失败!","请联系管理员!","warning");
            }
        });
    }

    function DrawnList() {
        for (let i = 0; i < dataList[0].length; i++) {
            var str = "    <tr>\n" +
                "        <th scope=\"row\" class='index'>"+(i+1)+"</th>\n" +
                "        <td>"+dataList[0][i]+"</td>\n" +
                "        <td>\n" +
                "            <button type=\"button\" class=\"btn btn-success\" disabled>更改题目(开发中..)</button>\n" +
                "            <button type=\"button\" class=\"btn btn-danger delete\">删除试题</button>\n" +
                "        </td>\n" +
                "    </tr>"
            $(".tbody").append(str);
        }
    }
    $(".tbody").on("click",".delete",function () {
        var index = $(this).parent().parent().children(".index").html();
        $.ajax({
            type: 'post',
            url: '/DeleteTable',
            data: {
                'code':dataList[1][index-1]
            },
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                alert("删除成功")
                $(".tbody").empty()
                initial()
            },
            error: function(data) {
                sendMessage("失败!","请联系管理员!","warning");
            }
        });
    })
    var m_clock = '';
    function sendMessage(tile,inner,state){

        $("#state").empty();
        var str = "<div style='margin-top: 50px' class=\"alert alert-"+state+" alert-dismissible rowmargin fade show\">" +
            "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" +
            "<strong>"+tile+"</strong> "+inner+"!" +
            "</div>";
        $("#state").append(str);
        m_clock = setInterval(closeMessage,5000);
    }

    function closeMessage() {
        $("#state").empty();
        clearInterval(m_clock)
    }
</script>





</body>
</html>